<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-23 13:35
 * Desc: 邀请好友弹窗组件
 */
-->
<template>
  <view class="invite-pop">
    <zm-popup v-model="currentValue" mode="bottom" :round="10">
      <view
        class="invite-pop__content"
        :style="{ 'padding-bottom': paddingBottom + 'rpx' }"
      >
        <!-- #ifdef MP-WEIXIN || H5 -->

        <view class="invite-pop__imgs">
          <view
            class="invite-pop__img"
            v-for="(item, index) in wxList"
            :key="index"
            @click="onClick(item)"
          >
            <view
              class="invite-pop__pic mb15"
              :class="'invite-pop__pic-' + item.key"
            ></view>
            <view class="fc3 fs22">{{ item.title }}</view>
          </view>
        </view>
        <!--  #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <view class="invite-pop__imgs">
          <view
            class="invite-pop__img"
            v-for="(item, index) in alipayList"
            :key="index"
            @click="onClick(item)"
          >
            <view
              class="invite-pop__pic mb15"
              :class="'invite-pop__pic-' + item.key"
            ></view>
            <view class="fc3 fs22">{{ item.title }}</view>
          </view>
        </view>
        <!-- #endif -->
        <view class="invite-pop__check">
          <u-checkbox-group
            v-model="checkboxValue1"
            @change="checkboxChange"
            placement="column"
          >
            <u-checkbox
              label-color="#3BC5D2"
              active-color="#3BC5D2"
              v-for="(item, index) in checkboxList1"
              :key="index"
              :label="item.label"
              :name="item.value"
            >
            </u-checkbox>
          </u-checkbox-group>
        </view>
        <!-- <view class="invite-pop__close" @click="onClose">取消</view> -->
      </view>
      <copy-url-pop
        v-if="isShow"
        v-model="isShow"
        :padding-bottom="paddingBottom"
      ></copy-url-pop>
    </zm-popup>
    <u-modal
      :close-on-click-overlay="true"
      @confirm="agreen"
      @cancel="cancel"
      @close="close"
      :cancel-text="modal.cancelText"
      :confirm-text="modal.confirmText"
      :show="modal.show"
      :show-cancel-button="true"
      :content="modal.content"
      :title="modal.title"
    >
    </u-modal>
  </view>
</template>
<script>
  import ZmPopup from '@/commons/ZmPopup'
  import CopyUrlPop from './CopyUrlPop.vue'
  import { locShare, locUserInfo } from '@/utils/locStore/data'
  export default {
    name: 'InvitePop',
    components: { ZmPopup, CopyUrlPop },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      paddingBottom: {
        type: Number,
        default: 0
      },
      obj: {
        type: Object,
        default: () => {
          return {
            type: '', // 套票
            id: '',
            name: ''
          }
        }
      }
    },
    data() {
      return {
        modal: {
          title: '头像设置提醒',
          content: '',
          show: false,
          cancelText: '不设置,继续分享',
          confirmText: '设置头像',
          url: '',
          data: {}
        },
        isShow: false,
        checkboxValue1: ['showUser'],
        showUser: true,
        // 基本案列数据
        checkboxList1: [
          {
            label: '显示分享者头像和昵称',
            value: 'showUser'
          }
        ],
        imgItems: [
          // { title: '分享到微信', key: 'shareWx' },
          // { title: '发朋友圈海报', key: 'poster' },
          // { title: '插入公众号', key: 'public' },
          // { title: '复制链接', key: 'copyUrl' }
        ],
        wxList: [
          { title: '分享到微信', key: 'shareWx' },
          { title: '发朋友圈海报', key: 'poster' },
          { title: '插入公众号', key: 'public' },
          { title: '复制链接', key: 'copyUrl' }
        ],
        alipayList: [{ title: '发朋友圈海报', key: 'poster' }]
        // mapType: {
        //   'normal' : '2',
        //   'coupon' : '2',
        //   ''
        // }
      }
    },

    computed: {
      currentValue: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    },
    methods: {
      onClose() {
        this.$emit('input', false)
      },
      async onClick(item) {
        // console.log(this.obj, 'this.obj')
        // console.log(this.obj.type, 'this.obj.type')
        this.$emit('click-item', item)
        const { shareKey, userName, nickName, headImg, memberId } =
          locUserInfo.get()
        // this.id = ['coupon', 'normal'].includes(this.obj.type)
        //   ? 'mallCommodityId'
        //   : this.obj.type === 'activity'
        //   ? 'activityId'
        //   : 'id'
        console.log(memberId, 'memberId', 'memberId')
        const shareParams = {
          uId: shareKey,
          memberId,
          nickName,
          headImg,
          userName,
          showUser: this.showUser ? '1' : '0'
        }
        if (this.obj.id) shareParams.id = this.obj.id
        locShare.set(shareParams)
        //分享活动的registerActivityId由上个页面传在obj里面
        switch (item.key) {
          case 'shareWx':
            this.tip('/subPages/shareWx/index', this.obj)
            // this.$tools.navigateTo('/subPages/shareWx/index', {
            //   type: this.obj.type,
            //   id: this.obj.id,
            //   name: this.obj.name ? this.obj.name : ''
            // })
            break
          case 'copyUrl':
            this.isShow = true
            break
          case 'poster':
            this.tip(`/subPages/fans/index`, this.obj)
            // this.$tools.navigateTo(`/subPages/fans/index`, {
            //   type: this.obj.type,
            //   id: this.obj.id
            // })
            break
          case 'public':
            this.$tools.navigateTo('/subPages/shareUrl/index', this.obj)
            break
          default:
            break
        }
      },
      async tip(url, data) {
        const userInfo = this.$auth.getLocUserInfo()
        if (this.showUser && userInfo.setTip) {
          console.log(userInfo.setTipMessage)
          this.modal.content = userInfo.setTipMessage
          this.modal.show = true
          this.modal.url = url
          this.modal.data = data
          // this.$msg
          //   .showModal({
          //     title: '头像设置提醒',
          //     content:
          //       '您已勾选显示分享者头像和昵称,为方便朋友识别,增强信任感,提升成交效率,请设置头像昵称',
          //     cancelText: '不设置,继续分享',
          //     confirmText: '设置头像'
          //   })
          //   .then(() => {
          //     this.$tools.navigateTo(url, data)
          //   })
          //   .catch(() => {
          //     this.$tools.navigateTo(`subPages/userInfo/index`)
          //   })
        } else {
          this.$tools.navigateTo(url, data)
        }
      },
      agreen() {
        this.modal.show = false
        this.$tools.navigateTo(`/subPages/userInfo/index`)
      },
      cancel() {
        this.modal.show = false
        this.$tools.navigateTo(this.modal.url, this.modal.data)
      },
      close() {
        this.modal.show = false
      },
      checkboxChange(v) {
        if (v.length > 0) {
          this.showUser = true
        } else {
          this.showUser = false
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .invite-pop {
    &__content {
      padding-top: 100rpx;
    }
    &__imgs {
      margin-top: -20rpx;
      padding: 0 48rpx 0 55rpx;
      display: flex;
      justify-content: space-between;
    }
    &__img {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    &__check {
      margin: 48rpx 0;
      padding: 0 40rpx;
    }
    &__close {
      margin: 0 auto;
      width: 710rpx;
      height: 100rpx;
      background: #ffffff;
      border: 2rpx solid #3bc5d2;
      border-radius: 18rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #3bc5d2;
    }

    &__pic-shareWx {
      width: 101rpx;
      height: 101rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/img-shareWx.png)
        no-repeat;
      background-size: 100%;
    }
    &__pic-poster {
      width: 102rpx;
      height: 101rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/img-poster.png)
        no-repeat;
      background-size: 100%;
    }
    &__pic-public {
      width: 101rpx;
      height: 101rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/img-public.png)
        no-repeat;
      background-size: 100%;
    }
    &__pic-copyUrl {
      width: 107rpx;
      height: 101rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/img-copyUrl.png)
        no-repeat;
      background-size: 100%;
    }
  }
</style>
